<!--  -->
<template>
  <div class='padding20 contentAudit'>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审批" name="first"></el-tab-pane>
      <el-tab-pane label="已审批" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if='activeName =="first"'>
      <CommonPic :list='courseList' @clickDetail='detailClick' :isPic='false'></CommonPic>
      <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div v-if='activeName =="second"'>
      <CommonPic :list='courseList' @clickDetail='detailClick' :isPic='false' :toAudit='false'></CommonPic>
      <el-pagination class="pageBar" :style="{float: 'right', padding: '20px'}" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import operateApi from "../api/operate.service.js";
export default {
  components: {},
  data() {
    return {
      activeName: "first",
      courseList: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      host: window.location.href.split("/#/")[0] + "/api",
      total: 0,
    };
  },
  mounted() {
    this.courseAllCheck({ type: 0, ...this.pageInfo });
  },
  computed: {},
  watch: {},
  methods: {
    handleClick(tab, event) {
      this.courseList = [];
      switch (tab.name) {
        case "first":
          this.courseAllCheck({
            type: 0,
            ...this.pageInfo,
          });
          break;
        case "second":
          // 进度查看
          this.courseAllCheck({
            type: 1,
            ...this.pageInfo,
          });
          break;
      }
    },
    async courseAllCheck(obj) {
      let { data } = await operateApi.fileCheckList(obj);
      this.courseList = data.records;
      this.total = data.totalRecordCount;
    },
    getPicUrl() {},
    detailClick(data) {
      this.$router.push({
        path: "/contentAuditDetail",
        query: {
          id: data.id,
          originPath: "/exper/views/operation/contentAudit",
        },
      });
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.courseAllCheck({
        type: this.activeName == "first" ? 0 : 1,
        ...this.pageInfo,
      });
    },
    currentChange(val) {
      this.pageInfo.currentPage = val;
      this.courseAllCheck({
        type: this.activeName == "first" ? 0 : 1,
        ...this.pageInfo,
      });
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.contentAudit {
  .auditClass {
    margin-bottom: 10px;
    border: 1px solid gray;
    padding: 4px;
    margin-right: 1%;
    width: 19%;
    .auditItem {
      text-align: center;
      height: 230px;
      line-height: 230px;
      background: #dfdfdf;
      color: red;
      font-size: 24px;
      font-weight: 700;
    }
  }
}
</style>